<style>
  .sub-menu-box:before {
    content: '';
    width: 100%;
    height: 12px;
    background: transparent;
    position: absolute;
    left: 0;
    top: -9px;
  }

  header .user {
    width: 140px;
    padding-bottom: 7px;
  }
  header .user>a {
    width: 100px;
  }

  header .user .vip {
    bottom: 7px;
  }
</style>
<div id="header-app" class="content">
  <div v-show="isShowNav" class="left">
    <a href="./50.html" class="logo">长海招聘</a>
    <!-- <div class="addr">
			北京
			<a href="javascript:void(0)" class="btn-change">[切换城市]</a>
		</div> -->
    <ul class="menu">
      <li :class="{on: tabIndex == 0}"><a href="./50.html">首页</a></li>
      <li :class="{on: tabIndex == 1}"><a href="./31.html">招聘管理</a></li>
      <li :class="{on: tabIndex == 2}"><a href="./40.html">候选人</a></li>
      <li :class="{on: tabIndex == 3}"><a href="./41.html">活动</a></li>
    </ul>
  </div>
  <div class="right">
    <div class="operate">
      <a v-if="isShowNav" :href="mesLink" class="newMessage">消息<i class="number" ref="number"></i></a>
      <!-- <a href="javascript:void(0)" class="">简历</a> -->
      <a href="javascript:void(0)" class="btn-down">APP下载
        <div class="down-box">
          <div class="item">
            <img src="images/code1.png" alt="" class="code" />
            <div class="btm">
              <img src="images/ios.png" alt="" class="icon" />IOS
            </div>
          </div>
          <div class="item">
            <img src="images/code2.png" alt="" class="code" />
            <div class="btm">
              <img src="images/android.png" alt="" class="icon" />Android
            </div>
          </div>
        </div>
      </a>
    </div>
    <div v-if="isShowNav" class="user">
      <a href="javascript:void(0)">{{userInfo.name}}</a>
      <img :src="userInfo.logo || 'images/noUser.png'" alt="" class="face" /><img v-if="userInfo.is_vip" src="images/vip.png" alt="" class="vip" />
      <ul class="sub-menu-box">
        <li><a href="./47.html">基本信息</a></li>
        <li><a v-if="isMain" href="./59.html">我的活动</a></li>
        <li><a v-if="isMain" href="./45.html">子账号管理</a></li>
        <li><a href="./46.html">收藏的牛人</a></li>
        <li><a v-if="isMain" href="./43.html">发布的活动</a></li>
        <li><a href="javascript:void(0)" @click="logoutHandle">退出登录</a></li>
        <li><a href="javascript:void(0)">注销账号</a></li>
      </ul>
    </div>
  </div>
</div>
<script>
  var _noNavUrlMapList = ['/52.html', '/53.html'];
  var headerVm = new Vue({
    el: '#header-app',
    data: function () {
      var tabMap = {
        '/27.html': 0,
        '/28.html': 0,
        '/29.html': 0,
        '/30.html': 0,
        '/31.html': 1,
        '/32.html': 1,
        '/33.html': 1,
        '/34.html': 1,
        '/35.html': 1,
        '/36.html': 1,
        '/37.html': 1,
        '/38.html': 1,
        '/39.html': 10,
        '/40.html': 2,
        '/41.html': 3,
        '/42.html': 10,
        '/43.html': 10,
        '/44.html': 10,
        '/45.html': 10,
        '/46.html': 10,
        '/47.html': 10,
        '/48.html': 10,
        '/49.html': 10,
        '/50.html': 0,
        '/58.html': 3,
        '/59.html': 10,
      }
      return {
        tabIndex: tabMap[location.pathname] || 0,
        userInfo: null,
        mesLink: location.pathname === '/39.html'? 'javascript:void(0);': 
        './39.html'
      }
    },
    computed: {
      isMain: function () {
        return this.userInfo ? this.userInfo.is_main : false
      },
      isShowNav: function() {
        return !~_noNavUrlMapList.indexOf(location.pathname) && this.userInfo
      }
    },
    created: function () {
      this.getUserInfo()
    },
    mounted: function () {
      // console.log(this.$refs.number);
    },
    methods: {
      getUserInfo: function () {
        var self = this;
        request(
          "enterprise/company/employee_base_info",
          "GET",
          "",
          function (res) {
            self.userInfo = res.data;
            if(self.isShowNav){
              self.$nextTick(function () {
                self.$refs.number.style.display = 'none'
              })
            }
          },
          function (err) {
            self.$message.error(err.message);
          }
        );
      },
      logoutHandle: function () {
        sessionStorage.removeItem('token')
        location.href = '01.html'
      }
    },
  })
</script>